import {
  Component,
  OnInit,
  OnChanges,
  ViewChild,
  ElementRef,
} from '@angular/core';
import { _HttpClient, SettingsService } from '@delon/theme';
import { EventbusService } from 'app/eventbus.service';
import { StroageService, TaomeiObj } from './stroage.service';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
  @ViewChild('carousel') carousel: ElementRef;
  items: any;
  array: any;
  fixedText: string;
  carouselText: Array<Array<any>>;
  tplModalButtonLoading: boolean;
  textTplModalButtonLoading: boolean;
  isVisible: boolean;
  isTextVisible: boolean;
  textFontSize: number;
  fixedTextFontSize: number;
  textFontBlod: string;
  textFontColor: string;
  fixedTextFontColor: string;
  textShadow: string;
  textShadowSize1: number;
  textShadowSize2: number;
  textShadowSize3: number;
  textShadowColor: string;

  fixedTextShadow: string;
  fixedTextShadowSize1: number;
  fixedTextShadowSize2: number;
  fixedTextShadowSize3: number;
  fixedTextShadowColor: string;

  scrollSpeed: number;
  hasBg: string;
  tabindex: number = 0;
  constructor(
    public settings: SettingsService,
    public eventbusService: EventbusService,
    public stroageService: StroageService,
  ) {
    this.getDataFromLocal();
    this.items = [
      {
        label: '编辑内容',
      },
      {
        label: '编辑字体',
      },
    ];
  }
  getDataFromLocal() {
    this.stroageService.getData().then(taomeiObj => {
      this.textFontSize = taomeiObj.textFontSize;
      this.fixedTextFontSize = taomeiObj.fixedTextFontSize;
      this.textFontBlod = taomeiObj.textFontBlod;
      this.textFontColor = taomeiObj.textFontColor;
      this.fixedTextFontColor = taomeiObj.fixedTextFontColor;
      this.textShadowSize1 = taomeiObj.textShadowSize1;
      this.textShadowSize2 = taomeiObj.textShadowSize2;
      this.textShadowSize3 = taomeiObj.textShadowSize3;
      this.textShadowColor = taomeiObj.textShadowColor;
      this.fixedTextShadowSize1 = taomeiObj.fixedTextShadowSize1;
      this.fixedTextShadowSize2 = taomeiObj.fixedTextShadowSize2;
      this.fixedTextShadowSize3 = taomeiObj.fixedTextShadowSize3;
      this.fixedTextShadowColor = taomeiObj.fixedTextShadowColor;
      this.scrollSpeed = taomeiObj.scrollSpeed;
      this.hasBg = taomeiObj.hasBg;
      this.fixedText = taomeiObj.fixedText;
      this.carouselText = taomeiObj.carouselText;
      this.hasBgChange(null);
      this.fixedTextShadowChanges();
      this.textShadowChanges();
    });
  }
  setDataToLocal() {
    const taomeiObj: TaomeiObj = {
      textFontSize: this.textFontSize,
      fixedTextFontSize: this.fixedTextFontSize,
      textFontBlod: this.textFontBlod,
      textFontColor: this.textFontColor,
      fixedTextFontColor: this.fixedTextFontColor,
      textShadowSize1: this.textShadowSize1,
      textShadowSize2: this.textShadowSize2,
      textShadowSize3: this.textShadowSize3,
      textShadowColor: this.textShadowColor,
      fixedTextShadowSize1: this.fixedTextShadowSize1,
      fixedTextShadowSize2: this.fixedTextShadowSize2,
      fixedTextShadowSize3: this.fixedTextShadowSize3,
      fixedTextShadowColor: this.fixedTextShadowColor,
      scrollSpeed: this.scrollSpeed,
      hasBg: this.hasBg,
      fixedText: this.fixedText,
      carouselText: this.carouselText,
    };
    this.stroageService.setData(taomeiObj);
  }
  textShadowChanges(e?) {
    this.textShadow = `${this.textShadowSize1}px ${this.textShadowSize2}px ${
      this.textShadowSize3
    }px ${this.textShadowColor}`;
  }
  fixedTextShadowChanges(e?) {
    this.fixedTextShadow = `${this.fixedTextShadowSize1}px ${
      this.fixedTextShadowSize2
    }px ${this.fixedTextShadowSize3}px ${this.fixedTextShadowColor}`;
  }
  hasBgChange(e) {
    if (this.hasBg === '1') {
      this.eventbusService.hasbg = true;
    } else if (this.hasBg === '0') {
      this.eventbusService.hasbg = false;
    }
    this.settings.setLayout('collapsed', false);
  }
  onClick(event, item) {
    console.log(item, event);
    console.dir(this.carousel);
    if (item.label === '编辑内容') {
      this.createTextTplModal();
    } else if (item.label === '编辑字体') {
      this.createTplModal();
    }
  }
  destroyTplModal() {
    this.isVisible = false;
    this.getDataFromLocal();
  }
  destroyTextTplModal() {
    this.isTextVisible = false;
    this.getDataFromLocal();
  }
  editTextStyle() {
    this.tplModalButtonLoading = true;
    setTimeout(() => {
      this.setDataToLocal();
      this.tplModalButtonLoading = false;
      this.isVisible = false;
    }, 1000);
  }
  editTxttContent() {
    this.textTplModalButtonLoading = true;
    setTimeout(() => {
      this.setDataToLocal();
      this.textTplModalButtonLoading = false;
      this.isTextVisible = false;
    }, 1000);
  }
  createTplModal(): void {
    this.isVisible = true;
  }
  createTextTplModal(): void {
    this.isTextVisible = true;
  }
  ngOnDestroy() {}
}
